<script setup>
import {onLoad} from '@dcloudio/uni-app'
import to from 'await-to-js'
import {hideLoading, loading, tip} from '@/utils/uni-api-wrap/toast'
import {fetchArticleDetail} from '@/api/banner'
import {downloadFile, openDocument} from '@/utils/uni-api-wrap/file'
import {getFileNameAndExtension} from '@/utils/utils'
import {createVideoContext} from '@/utils/uni-api-wrap/media'
import {getCurrentInstance} from 'vue'
import {setNavigationBarTitle} from '@/utils/uni-api-wrap/page'

const articleData = ref({
  title: '',
  create_datetime: '',
  desc: '',
  type: -1,
  fileUrl: '',
})

const instance = getCurrentInstance()


onLoad((options) => {
  to(fetchArticleDetail(options)).then(([err, result])=>{
    if (err) return
    const { data } = result
    articleData.value.title = data.title
    articleData.value.create_datetime = data.timeStr
    articleData.value.desc = data.content
    articleData.value.type = data.type
    articleData.value.fileUrl = data.fileUrl
  })
})

watch(() => ({ title: articleData.value.title, type: articleData.value.type }), ({ type, title }) => {
  if (type === 1) {
    setNavigationBarTitle(title || '文章详情')
  } else if (type === 3) {
    setNavigationBarTitle(title || '视频')
    // nextTick(() => {
    //   const videoContext = createVideoContext('video', instance)
    //   videoContext.play()
    // })
  } else if (type === 4) {
    setNavigationBarTitle(title || '')
  }
})

</script>

<template>
  <template v-if="articleData.type === 1">
    <view class="article-container">
        <text class="article-title">{{ articleData.title }}</text>
        <text class="article-time">{{ articleData.create_datetime }}</text>
        <view class="article-context">
          <rich-text :nodes="articleData.desc"></rich-text>
        </view>
    </view>
  </template>
  <!-- 视频 -->
  <template v-else-if="articleData.type === 3">
    <video controls class="video-container" :src="articleData.fileUrl" id="video" />
  </template>
  <!-- webview链接 -->
  <template v-else-if="articleData.type === 4">
    <web-view class="webview-container" :src="articleData.fileUrl" />
  </template>
</template>

<style scoped lang="scss">
.article-container {
  padding: 32rpx;
}
.article-title {
  display: block;
  padding-bottom: 48rpx;
  color: $kaoyan-color-9;
  font-size: 48rpx;
  font-style: normal;
  font-weight: 600;
  line-height: 68rpx;
  letter-spacing: 2rpx;
}
.article-time {
  display: block;
  padding-bottom: 24rpx;
  color: $kaoyan-color-11;
  font-size: 32rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 44rpx;
}

.article-context {
  font-size: 32rpx;
}
.video-container,
.webview-container {
  width: 100vw;
  height: 100vh;
}
</style>
